<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
            <el-breadcrumb-item>标签列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入标签" clearable v-model="tagName" @clear="getTagList">
                        <el-button slot="append" icon="el-icon-search" @click="getTagList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加标签</el-button>
                </el-col>
            </el-row>
            <el-table :data="tagList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="编号" prop="id"></el-table-column>
                <el-table-column label="标签名" prop="name"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeTagById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[6, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加用戶-->
        <el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%" @close="addTagFormClose">
            <el-form
                    :model="addTagForm"
                    :rules="addTagFormRules"
                    ref="addTagFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >

                <el-form-item label="标签名" prop="name">
                    <el-input v-model="addTagForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTag">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
        <!--修改用戶-->
        <el-dialog
                title="修改用戶"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editTagFormClose"
        >
            <el-form
                    :model="editTagForm"
                    :rules="editTagFormRules"
                    ref="editTagFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="标签名" prop="name">
                    <el-input v-model="editTagForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editTag">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                editDialogVisible: false,
                pageNum: 1,
                pageSize: 6,
                tagList: [],
                total: 0,
                tagName: "",
                addDialogVisible: false,
                addTagForm: {
                    name: "",
                },
                editTagForm: {
                    id: -1,
                    name: "",
                },
                editTagFormRules: {
                    // userCode: [
                    //   { required: true, message: "請輸入工号", trigger: "blur" },
                    //   { min: 6, max: 6, message: "工号必须是4个字符", trigger: "blur" }
                    // ],
                    // userName: [
                    //   { required: true, message: "請輸入用戶名", trigger: "blur" },
                    //   { min: 3, max: 8, message: "用戶名在3-8個字符之間", trigger: "blur" }
                    // ]
                    // department: [{ required: true, message: '請选择部门', trigger: 'change' }],
                    // locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]
                },
                addTagFormRules: {
                    // userCode: [
                    //   { required: true, message: "請輸入工号", trigger: "blur" },
                    //   { min: 6, max: 6, message: "工号必须是6个字符", trigger: "blur" }
                    // ],
                    // userName: [
                    //   { required: true, message: "請輸入用戶名", trigger: "blur" },
                    //   { min: 3, max: 8, message: "用戶名在3-8個字符之間", trigger: "blur" }
                    // ],
                    // userPassword: [
                    //   { required: true, message: "請輸入密碼", trigger: "blur" },
                    //   { min: 3, max: 8, message: "密碼在3-8個字符之間", trigger: "blur" }
                    // ]
                    // department: [{ required: true, message: '請选择部门', trigger: 'change' }],
                    // locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]
                }
            };
        },
        methods: {
            async removeTagById(id) {
                let url = this.$baseUrl.baseUrl+"tag/del/"+id;
                this.$axios.delete(url).then(res=>{
                    alert(res.data.msg);
                    this.getTagList();
                })
            },
            showEditDialog(row) {
                this.editDialogVisible=true
                this.editTagForm.id=row.id
                this.editTagForm.name=row.name
            },
            editTagFormClose() {
                this.$refs.editTagFormRef.resetFields();
            },
            editTag() {
                let url= this.$baseUrl.baseUrl+"tag/modify"
                this.$axios.put(url,{
                    id:this.editTagForm.id,
                    name:this.editTagForm.name
                }).then(res=>{
                    if(res.data.code==200){
                        this.editDialogVisible=false,
                            this.$message({
                                message:res.data.msg,
                                type:'success',
                                duration:1000
                            })
                        this.getTagList()
                    }else {
                        this.$message({
                            message:res.data.msg,
                            type:'success',
                            duration:1000
                        })
                    }
                })
            },
            addTag() {
                let url = this.$baseUrl.baseUrl+"tag/add"
                this.$axios.post(url,{
                    name:this.addTagForm.name
                }).then(res=>{
                    if(res.data.code==200){
                        this.addDialogVisible=false,
                            this.$message({
                                message:res.data.msg,
                                type:'success',
                                duration:1000
                            })
                        this.getTagList();
                    }else {
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1000
                        })
                    }
                })
            },
            addTagFormClose() {
                this.$refs.addTagFormRef.resetFields();
            },
            getTagList() {
                let url = this.$baseUrl.baseUrl+"tag/list"
                this.$axios.get(url,{
                    params:{
                        name:this.tagName,
                        now:this.pageNum,
                        size:this.pageSize,
                    }
                }).then(res=>{
                    if(res.data.code=200){
                        this.tagList=res.data.data.list;
                        this.pageNum=res.data.data.pageNum;
                        this.pageSize=res.data.data.pageSize;
                        this.total=res.data.data.total;
                    }
                })
            },
            searchUser() {
                this.pageNum = 1;
                this.pageSize = 6;
                this.getTagList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getTagList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getTagList();
            },
        },
        created() {
            this.getTagList();
        }
    };
</script>
<style lang="less" scoped>
</style>